<template>
    <div class="">
      <!-- 背景插件 -->
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
      <div id="collectionChannel">
      <el-row>
        <div class="page-title">管理文章</div>
      </el-row>
      <el-row class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/Home/homaepage' }"><span style="color: #fff">首页</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #fff">管理文章</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <div class="table-container">
        <el-row>
          <div class="form-title"><i class="el-icon-edit"></i>管理文章</div>
        </el-row>
        <div class="form-container">
          <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%" border stripe @selection-change="selectionChange" class="myClass">
            <el-table-column align="center" type="selection" width="50"></el-table-column>
            <el-table-column align="center" prop="date" label="日期" sortable width="180">
              <template slot-scope="scope">
                <el-input v-if="showEdit[scope.$index]" v-model="scope.row.date" size="small" placeholder="请输入内容"></el-input>
                <span v-if="!showEdit[scope.$index] && !isPopover">{{scope.row.time | FormatDate('yyyy-MM-dd')}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="title" label="标题">
              <template slot-scope="scope">
                <el-input v-if="showEdit[scope.$index]" v-model="scope.row.title" size="small" placeholder="请输入内容"></el-input>
                <span v-if="!showEdit[scope.$index]">{{scope.row.title}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="content" label="内容" >
              <template slot-scope="scope">
                <el-input v-if="showEdit[scope.$index]" v-model="scope.row.content" size="small" placeholder="请输入内容"></el-input>
                <span v-if="!showEdit[scope.$index]">{{scope.row.text}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150%">
              <template slot-scope="scope">
                <el-button size="mini" to="/Home/modification" style="padding: 7px 14px"><span class="edit-btn" @click="editor(scope.row), showedit(scope.row)">编辑</span></el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 40]" 
                  :page-size="pagesize"         
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tableData.length">    <!--//这是显示总共有多少数据，-->
          </el-pagination>
        </div>
      </div>
      <transition type="transition" name="fade" appear enter-active-class="animated zoomIn fade-enter-active" leave-active-class="animated zoomOut fade-leave-active" appear-active-class="animated zoomIn">
        <div class="" style="position: absolute; background: rgba(0, 0, 0, 0.5); width: 45%;  left: 320px; top: 100px; border-radius: 10px;" v-if="showeditdiv">
          <el-input type="text" placeholder="标题" v-model="text" maxlength="10" clearable show-word-limit style="width: 50%; margin-top: 30px"></el-input>
          <div style="margin: 20px 0;"></div>
          <el-input type="textarea" placeholder="内容" show-word-limit v-model="textarea"></el-input>
          <el-button type="primary" style="margin-top: 30px; margin-left: -20px; margin-bottom: 10px;" @click="submit">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
name: "collectionChannel",
inject:['reload'],
data(){
  return{
    input:'',
    isPopover:false,
    tableData:[],//渲染数据
    allTableData:[],
    checked:[],//表格行是否勾选
    showEdit:[false],
    // 编辑页面展示的内容
    text: '',
    textarea: '',
    showeditdiv: false,
    id: 0,
    currentPage:1, //初始页
    pagesize:8,    //    每页的数据
  }
},
mounted () {
  this.getInfo()
  if (document.documentElement.clientWidth < 1490) {
    this.$set(this,'isPopover',true);
  }
  window.onresize = ()=> {
    var clientWidth = document.documentElement.clientWidth;
    if (clientWidth < 1490) {
      this.$set(this,'isPopover',true);
    }
    else
      this.$set(this,'isPopover',false)
  }
},
watch:{
  'input':function inputChange() {
    if (this.input == '')
      this.tableData = this.allTableData;
    else{
      this.tableData = [];
      this.allTableData.forEach(function (dataItem,index) {
        if(dataItem.date.indexOf(this.input) != -1){
          this.tableData.push(this.allTableData[index]);
        }
      },this)
    }
  }
},
methods:{
  // 初始页currentPage、初始每页数据数pagesize和数据data
  handleSizeChange: function (size) {
    this.pagesize = size;
    console.log(this.pagesize)  //每页下拉显示数据
  },
  handleCurrentChange: function(currentPage){
    this.currentPage = currentPage;
    console.log(this.currentPage)  //点击第几页
  },
  submit(row) {
    let wid = this.id
    let title = this.text
    let text = this.textarea
    let data = Qs.stringify({wid, title, text})
    axios.post('/api/updateWritesById', data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res) => {
      this.$message({
        message: '编辑成功',
        type: 'success'
      })
      this.reload()
    })
    this.showeditdiv = false
  },
  showedit() {
    this.showeditdiv = true
  },
  editor(row) {
    let id = row.wid
    let data = Qs.stringify({id})
    axios.post('/api/findWritesById', data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res) => {
      console.log('res', res)
      const data = res.data
      this.text = data.title
      this.textarea = data.text
      this.id = data.wid
    })
	},
  getInfo() {
    axios.get('/api/findAllWrites').then(res =>{
      console.log(res)
      this.getInfoSucc(res)
    }).then(res =>{
      this.tableData = this.allTableData
    })
  },
  // 删除
  handleDelete(index,row){
    this.$confirm('确定删除该记录吗？ ', '提示', {
        type: 'warning'
      }).then(() => {
        let wid = row.wid
        let data = Qs.stringify({wid})
        axios.post('/api/deleteWritesById', data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.reload()
        })
      }).catch(() => {
        console.log('删除失败')
      })
    },
  selectionChange(selection){
    this.checked=selection;
  },
  getInfoSucc(res) {
    this.allTableData = res.data
  }
  }
}
</script>

<style lang="css">
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 3s;
}
.myClass .el-table {
  background: transparent;
}
</style>

<style scoped lang="less">
#collectionChannel {
  width: 84%;
  height: 500px;
  background-color: transparent;
  position: absolute;
  left: 232px;
  top: 5px;
  .page-title{
    font-size: 32px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
  }
  .breadcrumb{
    background-color: transparent;
    padding: 0.5rem;
    margin-bottom: 25px;
    border: 1px solid #fff;
    color: #fff;
  }
  .table-container{
    border: 1px solid #fff;
  }
  .form-container{
    padding: 10px;
  }
  .form-title{
    background-color: transparent;
    color: white;
    padding: 0.5rem;
    text-align: left;
    margin-bottom: 5px;
    color: #fff;
  }
  .btn-container{
    overflow: hidden;
    .el-button{
      float: left;
    }
  }
  .search-input{
    width: 300px;
    float: left;
    margin-left: 10px;
    margin-right: 5px;
  }
}
.lizi {
  background: #000;
  height: 700px;
}
</style>
